<!-- 我的评论页面 -->
<template>
  <div class="right">
    <div class="showTitle">
      <el-icon>
        <ZoomOut />
      </el-icon>
      <h2>我的评价</h2>
    </div>
    <div class="Comment" id="CommentMSg" v-for="(item, i) in this.rows">
      <div id="commentTitle">
        <h4 id="order">订单编号:</h4>
        <div id="orderDetail">
          <h4>{{ item.orderId }}</h4>
        </div>
        <h4 id="range">分类范围：</h4>
        <div id="rangeDetail">
          <h4>{{ item.categoryName }}</h4>
        </div>
        <h4 id="date">日期：</h4>
        <div id="dateDetail">
          <h4>{{ item.createTime }}</h4>
        </div>
        <br />
        <div id="commentMain">
          <div id="detailTop">
            <h6 id="nameDetail">{{ item.userName }}</h6>
            <h6 id="createTime" class="bigTime">{{ item.createTime }}</h6>
            <!-- <h6 id="reply" @click="replyPrompt($event, item.id)">回复</h6> -->

            <br />
            <h4 id="commentContext">{{ item.content }}</h4>
            <div></div>
            <hr />
            <!-- TODO:回复楼 -->
            <div id="replyMsg" v-for="item2 in item.children">
              <h6 id="nameDetail">{{ item2.username }}</h6>
              <h6 id="nameDetail" class="textReply">回复</h6>
              <h6 id="nameDetail" class="theBoss">
                {{ item2.toCommentUserName }}
              </h6>
              <h6 id="createTime" class="littleTime">{{ item2.createTime }}</h6>
              <h6 id="reply" class="littleReply" @click="replyPrompt($event, item.id)">
                回复
              </h6>
              <br />
              <h6 class="replyContext">{{ item2.content }}</h6>
              <hr id="replyHr" />
            </div>

            <br />
            <div class="showReply" id="replyMsg" v-if="visualFlag">
              <input type="text" /><input type="button" value="发布" @click="addComoment" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav v-if="total * 1" style="text-align: -webkit-center">
      <el-pagination :total="total" :page-size="pageSize" :current-page="pageNum" :page-sizes="pageSizes"
        :loading="loading" layout="prev, pager, next" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </nav>
    
    <div v-if="!(this.total * 1)">
      <img id="noImg" src="../img/noContent.png" />
      <h4>没有关于你的评价....</h4>
    </div>
  </div>
  <div class="clear"></div>
</template>

<script>
import { BossComment, userInfo, Comment } from "@/api";
import { ZoomOut } from "@element-plus/icons-vue";
import popmessage from "@/components/tip/index.js";
export default {
  name: "MyComment",
  created() {
    if (localStorage.getItem("token")) {
      this.token = localStorage.getItem("token");
    }
    this.init()
  },
  data() {
    return {
      token: '',
      visualFlag: false,
      total: 0,
      serverId: '',
      pageNum: 1,
      pageSize: 4,
      rows: [],
      queryList: {
        orderId: '',
        userId: '',
        content: ''
      },
      pageSizes: [10, 20, 50, 100] // 分页下拉框选项
    };
  },
  components: {
    ZoomOut,
  },

  methods: {
    init() {
      userInfo().then((response) => {
        if (response.data.code === 200) {
          this.serverId = response.data.data.id;
          this.queryList.userId = response.data.data.id
          this.showComment()
        } else {
          alert("获取用户id失败");
        }
      });
    },
    showComment() {
      const params = {
        userId: this.serverId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      // 查询用户评论
      BossComment(params).then((response) => {
        if (response.data.code === 200) {
          console.log(response.data.data)
          this.rows = response.data.data.rows;
          this.total = parseInt(response.data.data.total);
        }
      });
    },
    // 添加评论
    addComoment() {
      let params = {
        orderId: this.queryList.orderId,
        userId: this.queryList.userId,
        content: this.queryList.content
      }
      Comment(params).then(res => {
        if (res.data.code === 200) {
          console.log('评论成功')
          popmessage({ type: "success", str: "发布成功" });
        }
      })
      setTimeout(() => {
        this.visualFlag = false
      }, 200);
    },
    //回复弹窗
    replyPrompt(e, id) {
      this.visualFlag = true
      this.queryList.orderId = id
    },
    // 改变分页大小事件
    handleSizeChange(val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      // 分页数改变事件
      this.pageNum = val
      this.init()
    },
  },
};
</script>
<style scoped>
.right {
  width: 59rem;
  background-color: rgb(255, 255, 255);
  /* top: 1rem; */
  /* left: 24rem; */
  border: 1px solid gray;
  border-radius: 10px;
  display: inline-block;
  margin: 0;
  margin-left: 25rem;
  float: left;
  margin-top: -43.5rem;
}

.showTitle {
  position: relative;
  width: 100%;
  height: 3rem;
  border-bottom: 1px solid rgb(165, 162, 162);
  box-sizing: border-box;
  text-align: start;
  padding-left: 2rem;
}

.showTitle h2 {
  display: inline-block;
  font-size: 1.3rem;
  text-align: left;
}

/* 评价表 */
#commentTitle {
  /*   position: absolute; */
  margin: 0 auto;
  padding: 0;
  margin-top: 2rem;
  background-color: #f5f5f5;
  text-align: left;
  width: 85%;
  border-radius: 1rem;
}

#commentTitle h4 {
  display: inline-block;
  margin: 0;
  padding: 0;
}

#commentTitle #order {
  margin-left: 1rem;
  margin-top: 2rem;
}

#commentTitle #detail {
  margin-left: 3em;
  color: #4c96b3;
}

#commentTitle #date {
  margin-left: 2rem;
}

#commentTitle div {
  display: inline-block;
  /*   background-color: aqua; */
  position: relative;
  top: 0.3rem;
}

#commentTitle #orderDetail {
  width: 8rem;
  overflow: hidden;
}

#commentTitle #range {
  margin-left: 0rem;
}

#commentTitle #rangeDetail {
  top: 0.2rem;
  width: 4.5rem;
  overflow: hidden;
}

.bigTime {
  margin-left: 0rem !important;
}

#commentTitle #dateDetail {
  position: relative;
  top: 0.3rem;
  width: 11rem;
  overflow: hidden;
}

#commentMain {
  background-color: #fdfdfd;
  margin: 0 auto;
  margin-left: 0.5rem;
  width: 98%;
  border-radius: 1rem;
  margin-bottom: 1rem;
}

#commentMain h6 {
  /*  background-color: #4c96b3; */
  color: #726f6f;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-left: 1.5rem;
}

#commentMain #nameDetail {
  width: 6rem;
  overflow: hidden;
  margin-top: 1rem;
}

#commentMain #createTime {
  overflow: hidden;
  width: 11rem;
}

#commentMain #reply {
  cursor: pointer;
  margin-left: 26rem;
}

#commentMain hr {
  display: block;
  width: 95%;
  unicode-bidi: isolate;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border-style: inset;
  border-width: 1px;
}

#commentMain #commentContext {
  margin-top: 0.5rem;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

/* #CommentMSg :nth-child(3) {
  margin-bottom: 5rem;
} */
::v-deep .el-pagination {
  --el-pagination-font-size: 14px;
  --el-pagination-bg-color: var(--el-fill-color-blank);
  --el-pagination-text-color: var(--el-text-color-primary);
  --el-pagination-border-radius: 2px;
  --el-pagination-button-color: var(--el-text-color-primary);
  --el-pagination-button-width: 32px;
  --el-pagination-button-height: 32px;
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-pagination-button-bg-color: var(--el-fill-color);
  --el-pagination-hover-color: var(--el-color-primary);
  --el-pagination-font-size-small: 12px;
  --el-pagination-button-width-small: 24px;
  --el-pagination-button-height-small: 24px;
  --el-pagination-item-gap: 16px;
  white-space: nowrap;
  color: var(--el-pagination-text-color);
  font-size: var(--el-pagination-font-size);
  font-weight: 400;
  display: flex;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
  justify-content: center;
  /*   position: fixed;
  top: 56rem;
  left: 11rem; */
}

/* 回复 */
.right #replyMsg {
  /*   display: none; */
  margin-bottom: 1rem;
}

input[type="button"] {
  background-color: #409eff;
  width: 6rem;
  height: 2rem;
  border-radius: 1rem;

  right: 2rem;
  border: none;

  color: white;
  text-align: center;
  letter-spacing: 0.3rem;
  cursor: pointer;
}

#replyMsg input[type="text"] {
  width: 22rem;
  height: 1.7rem;
  font-size: 1.2rem;
  margin-left: 2rem;
}

/* 回复小框内容 */
.right #detailTop .textReply {
  margin-left: -1rem;
}

.right #detailTop .theBoss {
  margin-left: -2rem;
}

.right #detailTop .littleReply {
  margin-left: 14rem !important;
  padding-right: 2rem !important;
}

.right #detailTop .replyContext {
  color: #282727;
  font-size: 1rem;
  margin-top: 1rem !important;
}

.right #detailTop .replyHr {}

.right #detailTop #replyMsg {
  padding-left: 4rem;
}

.right #detailTop #replyMsg h6 {
  margin-top: 0rem;
}

.right #detailTop .littleTime {
  margin-left: -1rem;
}

/* 缺省页 */
#noImg {
  width: 26rem;
  margin-left: 2rem;
}

/* 清除浮动 */
.clear {
  clear: both;
}
</style>
